$(document).ready(function(){
    $("#submit").click(function(){
        var structure = $("#profil").text();
        var startDate = $("#datepicker_start").val();
        var stopDate = $("#datepicker_stop").val();
        var beboere = $("#beboere option:selected").text();
        var kommune = $("#idSlctKommuner option:selected").text();
        var fylke = $("#idSlctFylker option:selected").text();
        var station = $("#idSlctWeatherStations option:selected").val();
        var tidsfrekvens = $("#tid option:selected").text();
        var waterTankTemp = $("#water_temp").val();
        var waterUsing = $("#water_usage").val();
        var personCount = $("#person_count").val();
        var hoyde = $("#vegg_hoyde").val();
        var bredde = $("#vegg_bredde").val();
        var uverdi = $("#uverdi").val();
        
        var energiForbrukLight = new Array();
        for(i = 0; i < chartBelysning.series[0].data.length; i++){
            energiForbrukLight[i] = chartBelysning.series[0].data[i].y;
        }
        
        var energiForbrukEquip = new Array();
        for(i = 0; i < chartInventar.series[0].data.length; i++){
            energiForbrukEquip[i] = chartInventar.series[0].data[i].y;
        }

        var uteTemp = new Array();
        var inneTemp = new Array();
        
        for(i = 0; i< temperatureChart.series[0].data.length; i++){
            uteTemp[i] = temperatureChart.series[0].data[i].y;
            inneTemp[i] = temperatureChart.series[1].data[i].y;
        }
        //alert(startDate + stopDate + beboere + kommune + station + tidsfrekvens);
        var dataToSend = {
            structure : structure,
            startDate : startDate,
            stopDate: stopDate,
            beboere: beboere,   
            kommune: kommune,
            fylke: fylke,
            station: station,
            tidsfrekvens: tidsfrekvens,
            energiForbrukLight: energiForbrukLight,
            energiForbrukEquip: energiForbrukEquip,
            uteTemp: uteTemp,
            inneTemp: inneTemp,
            waterTemp: waterTankTemp,
            waterUsing: waterUsing,
            personCount: personCount,
            vegghoyde: hoyde,
            veggbredde: bredde,
            uverdi:uverdi
            
        };
        $.getJSON("Submit",dataToSend,  function(json) {
            //Logic to Parse the received JSON
            var lang = new Array();
            var start = '';
            //var obj = $.parseJSON(json);
            //alert("obj: "+obj);
            
            $.each(json, function(i,res) {
                if (i == 'StartDate')
                    start = res;
                else
                    lang.push(res);
            });
            //var chart = new Highcharts.Chart(options);
            
            var options = {
            chart: {
                renderTo: 'chart',
                zoomType: 'x',
                spacingRight: 20
            },
            title: {
                text: 'Simulert strømforbruk'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Klikk og dra over området du vil zoome inn' :
                    'Dra fingeren over grafen for å zoome inn'
            },
            xAxis: {
                type: 'datetime',
                maxZoom: 24 * 3600000, // En dag
                title: {
                    text: null
                }
            },
            yAxis: {
                title: {
                    text: 'Kilowattime'
                },
                min: 0.6,
                startOnTick: false,
                showFirstLabel: false
            },
            tooltip: {
                shared: true
            },
            legend: {
                enabled: false
            },
            exporting: {
                buttons: {
                    exportButton: {
                        menuItems: null,
                        onclick: function() {
                            this.exportChart();
                        }
                    }
                }
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, 'rgba(2,0,0,0)']
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: true,
                                radius: 5
                            }
                        }
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    }
                }
            },
            series: [{
                type: 'area',
                name: 'Strømforbruk',
                pointInterval: 3600 * 1000,
                pointStart: start,
                data: lang
            }]
        };
        
        var chart = new Highcharts.Chart(options);
            
        });
 });
        
        
        
    
    
Highcharts.theme = {
   colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
      "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
   chart: {
      backgroundColor: {
         linearGradient: [0, 0, 0, 400],
         stops: [
            [0, 'rgb(96, 96, 96)'],
            [1, 'rgb(16, 16, 16)']
         ]
      },
      borderWidth: 0,
      borderRadius: 15,
      plotBackgroundColor: null,
      plotShadow: false,
      plotBorderWidth: 0
   },
   title: {
      style: {
         color: '#FFF',
         font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
      }
   },
   subtitle: {
      style: {
         color: '#DDD',
         font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
      }
   },
   xAxis: {
      gridLineWidth: 0,
      lineColor: '#999',
      tickColor: '#999',
      labels: {
         style: {
            color: '#999',
            fontWeight: 'bold'
         }
      },
      title: {
         style: {
            color: '#AAA',
            font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
         }
      }
   },
   yAxis: {
      alternateGridColor: null,
      minorTickInterval: null,
      gridLineColor: 'rgba(255, 255, 255, .1)',
      lineWidth: 0,
      tickWidth: 0,
      labels: {
         style: {
            color: '#999',
            fontWeight: 'bold'
         }
      },
      title: {
         style: {
            color: '#AAA',
            font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
         }
      }
   },
   legend: {
      itemStyle: {
         color: '#CCC'
      },
      itemHoverStyle: {
         color: '#FFF'
      },
      itemHiddenStyle: {
         color: '#333'
      }
   },
   labels: {
      style: {
         color: '#CCC'
      }
   },
   tooltip: {
      backgroundColor: {
         linearGradient: [0, 0, 0, 50],
         stops: [
            [0, 'rgba(96, 96, 96, .8)'],
            [1, 'rgba(16, 16, 16, .8)']
         ]
      },
      borderWidth: 0,
      style: {
         color: '#FFF'
      }
   },


   plotOptions: {
      line: {
         dataLabels: {
            color: '#CCC'
         },
         marker: {
            lineColor: '#333'
         }
      },
      spline: {
         marker: {
            lineColor: '#333'
         }
      },
      scatter: {
         marker: {
            lineColor: '#333'
         }
      },
      candlestick: {
         lineColor: 'white'
      }
   },

   toolbar: {
      itemStyle: {
         color: '#CCC'
      }
   },

   navigation: {
      buttonOptions: {
         backgroundColor: {
            linearGradient: [0, 0, 0, 20],
            stops: [
               [0.4, '#606060'],
               [0.6, '#333333']
            ]
         },
         borderColor: '#000000',
         symbolStroke: '#C0C0C0',
         hoverSymbolStroke: '#FFFFFF'
      }
   },

   exporting: {
      buttons: {
         exportButton: {
            symbolFill: '#55BE3B'
         },
         printButton: {
            symbolFill: '#7797BE'
         }
      }
   },

   // scroll charts
   rangeSelector: {
      buttonTheme: {
         fill: {
            linearGradient: [0, 0, 0, 20],
            stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
         },
         stroke: '#000000',
         style: {
            color: '#CCC',
            fontWeight: 'bold'
         },
         states: {
            hover: {
               fill: {
                  linearGradient: [0, 0, 0, 20],
                  stops: [
                     [0.4, '#BBB'],
                     [0.6, '#888']
                  ]
               },
               stroke: '#000000',
               style: {
                  color: 'white'
               }
            },
            select: {
               fill: {
                  linearGradient: [0, 0, 0, 20],
                  stops: [
                     [0.1, '#000'],
                     [0.3, '#333']
                  ]
               },
               stroke: '#000000',
               style: {
                  color: 'yellow'
               }
            }
         }
      },
      inputStyle: {
         backgroundColor: '#333',
         color: 'silver'
      },
      labelStyle: {
         color: 'silver'
      }
   },

   navigator: {
      handles: {
         backgroundColor: '#666',
         borderColor: '#AAA'
      },
      outlineColor: '#CCC',
      maskFill: 'rgba(16, 16, 16, 0.5)',
      series: {
         color: '#7798BF',
         lineColor: '#A6C7ED'
      }
   },

   scrollbar: {
      barBackgroundColor: {
            linearGradient: [0, 0, 0, 20],
            stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
         },
      barBorderColor: '#CCC',
      buttonArrowColor: '#CCC',
      buttonBackgroundColor: {
            linearGradient: [0, 0, 0, 20],
            stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
         },
      buttonBorderColor: '#CCC',
      rifleColor: '#FFF',
      trackBackgroundColor: {
         linearGradient: [0, 0, 0, 10],
         stops: [
            [0, '#000'],
            [1, '#333']
         ]
      },
      trackBorderColor: '#666'
   },

   // special colors for some of the demo examples
   legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
   legendBackgroundColorSolid: 'rgb(70, 70, 70)',
   dataLabelsColor: '#444',
   textColor: '#E0E0E0',
   maskColor: 'rgba(255,255,255,0.3)'
};

// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

});

